import React,{useState} from 'react';
import { Drawer, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import {IRouteComponentProps} from 'umi';

interface Objs{
    createAt: string,
    id: string,
    imgUrl: string,
    name: string,
    pageUrl: string,
    size: number,
    visible:boolean,
    changeFlag:(flag:boolean)=>void
}
// const Mask:React.FC<Objs> = ({createAt,id,imgUrl,name,pageUrl,size,visible})=>{
const Mask:React.FC<Objs> = ({visible,changeFlag,createAt,id,imgUrl,name,pageUrl,size})=>{
    const onClose = () => {
        changeFlag(false)
    };

    // console.log(createAt,id,imgUrl,name,pageUrl,size)
    // console.log(visible,createAt,id,imgUrl,name,pageUrl,size)
    return <div className='mask'>
        <Drawer
          title="文件信息"
          width={640}
          onClose={onClose}
          visible={visible}
          bodyStyle={{ paddingBottom: 80 }}
          footer={
            <div
              style={{
                textAlign: 'right',
              }}
            >
              <Button onClick={onClose} style={{ marginRight: 8 }}>
                关闭
              </Button>
              <Button onClick={onClose} type="primary">
                Submit
              </Button>
            </div>
          }
        >
          <div>
              <div style={{width:'600px',height:'360px',position:'relative'}}>
                <img src={imgUrl} alt="" style={{position:'absolute',top:'50%',left:'50%',height:'100%',width:'100%',transform:'translate3d(-50%,-50%,0)',objectFit:'cover'}}/>
              </div>
              <div style={{marginLeft:'10px',marginTop:'20px'}}>
                <p>文件名称：{name}</p>
                <p>制作页面：{pageUrl}文件大小：{size}KB</p>
                <div style={{display:'flex'}}>
                    <p>访问链接：</p>
                    <p style={{border:'solid 1px #ccc',padding:'5px',width:'85%'}}>{imgUrl}</p>
                </div>
                <a href="#" style={{marginLeft:"60px",fontSize:'16px'}}>复制</a>
              </div>
          </div>
        </Drawer>
    </div>
}

export default Mask;